<div class="page">
  <h1 class="header">Projects</h1>

  <nav class="page-operations">
    <div class="page-operations-content">
      <ul>
        <li ng-show="projects.isDesktop"><button class="btn-default" ng-click="projects.openProject()"><i class="fa fa-folder-open-o"></i> Open Project</button></li>
        <li><button class="btn-success" ng-click="projects.newProject()"><i class="fa fa-plus"></i> New Project</button></li>
      </ul>
    </div>
  </nav>

  <div class="content">

    <!-- IF NO PROJECTS -->
    <div ng-hide="projects.recentProjects.length">
      <p>You don't have any project yet.</p>
      <!-- <p><button class="btn btn-success btn-lg" ng-click="projects.newProject()"><i class="fa fa-plus"></i> New project</button></p> -->
    </div>
    
    <!-- IF PROJECTS -->
    <table class="table table-striped">
      <tr ng-repeat="item in projects.recentProjects track by $index" class="{'info':item.isOpen}">
        <td ng-show="item.isOpen" class="info">
          <div class="btn-group pull-right" role="group" aria-label="...">
            <button type="button" class="btn btn-info" ui-sref="editor"><i class="fa fa-arrow-circle-o-left"></i> Editor</button>
            <button type="button" class="btn btn-success" ng-click="projects.saveProject()"><i class="fa fa-save"></i> Save</button>
            <button type="button" class="btn btn-default" ng-click="projects.editProject()"><i class="fa fa-pencil"></i> Rename</button>
            <button type="button" class="btn btn-default" ng-click="projects.closeProject()"><i class="fa fa-close"></i> Close</button>
          </div>
          
          <small><em>Current project</em></small>
          <h3 class="current-project">{{item.name}}  <small><em>{{item.path}}</em></small> 
          </h3>
        </td>
        <td ng-hide="item.isOpen">
          <div class="btn-group pull-right" role="group" aria-label="...">
            <button type="button" class="btn btn-info btn-sm" ng-click="projects.openProject(item.path)"><i class="fa fa-folder-open-o"></i> Open</button>
            <button type="button" class="btn btn-danger btn-sm" ng-click="projects.removeProject(item.path)"><i class="fa fa-trash-o"></i> Remove</button>
          </div>
          <h3>{{item.name}}  <small><em>{{item.path}}</em></small> </h3>
        
        </td>
      </tr>
    </table>

  </div>
</div>
